<template>
  <div>
    <van-popup
      v-model="BackgroudShow"
      round
      position="bottom"
      :style="{ height: '748px' }"
    >
      <div class="SetBox">
        <li @click="BackgroudShow = false">取消</li>
        <li>背景设置</li>
        <li @click="BackgroudShow = false">确定</li>
      </div>
      <div class="SetBtn">
        <li>字体&图标颜色</li>
        <li><span>白色</span><span>黑色</span></li>
      </div>
      <p class="SetP">卡片透明度</p>
      <van-slider v-model="value" bar-height="10px" active-color="#77CC7D" />
      <p class="SetP">卡片模糊</p>
      <van-slider
        v-model="Rgbavalue"
        bar-height="10px"
        active-color="#77CC7D"
      />
      <div class="SetBox">
        <li>计时背景</li>
        <li></li>
        <li @click="showPopup">发现更多&nbsp;&nbsp;></li>
      </div>
      <div class="SetImg">
        <ul>
          <img src="../../img/practice/取消 (2).png" alt="" />
          <p>自定义</p>
        </ul>
        <ul>
          <img src="../../img/practice/上午打卡.jpg" alt="" />
        </ul>
        <ul>
          <img src="../../img/practice/上午打卡.jpg" alt="" />
        </ul>
        <ul>
          <img src="../../img/practice/上午打卡.jpg" alt="" />
        </ul>
      </div>
    </van-popup>
    <BackgroudSet />
  </div>
</template>

<script>
import BackgroudSet from "../../components/practice/Background-Set.vue";
export default {
  name: "Background",
  components: { BackgroudSet },
  data() {
    return {
      BackgroudShow: false,
      value: 50,
      Rgbavalue: 50,
      BackgroudSetShow: true,
    };
  },
  methods: {
    onChange(value) {
      Toast("当前值：" + value);
    },
    showPopup() {
      this.$bus.$emit("BackgroudSetShow", this.BackgroudSetShow);
    },
  },
  mounted() {
    this.$bus.$on("BackgroudShow", (show) => {
      this.BackgroudShow = show;
    });
  },
};
</script>

<style>
.SetBox {
  display: flex;
  justify-content: space-between;
}
.SetBox li:nth-child(1) {
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  margin: 25px 0 0 29px;
}
.SetBox li:nth-child(2) {
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-top: 20px;
}
.SetBox li:nth-child(3) {
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin: 25px 33px 0 0;
}
.SetBtn {
  margin-top: 36px;
  display: flex;
  justify-content: space-around;
}
.SetBtn li:nth-child(1) {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  margin-right: 218px;
}
.SetBtn li:nth-child(2) {
  width: 127px;
  height: 41px;
  background: #f5efef;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.SetP {
  width: 132px;
  height: 23px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  margin: 67px 0 31px 60px;
}
.SetImg {
  display: flex;
  justify-content: space-around;
}
.SetImg ul {
  width: 140px;
  height: 224px;
  margin-top: 36px;
}
.SetImg ul:nth-child(1) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #e6e6e6;
  border-radius: 10px;
}
.SetImg ul:nth-child(1) img {
  width: 30px;
  height: 29px;
  margin-bottom: 23px;
}
.SetImg img {
  width: 140px;
  height: 224px;
  border-radius: 10px;
}
</style>